<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="./images/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>-*锋行天下音乐*-</title>
  <style>
    body {
      margin: 0;
    }

    .singer-list {
      box-sizing: border-box;
      width: 100%;
      /* height: 100vh; */
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px;
    }

    .singer-list .item {
      width: 100%;
      height: 18vh;
      background: rgb(234, 232, 232);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }

    .item .img-wrap {
      width: 18vh;
      height: 18vh;
      overflow: hidden;
    }

    .img-wrap img {
      width: 100%;
      height: 100%;
    }

    .item .detail {
      width: 45vw;
      height: 100%;
    }

    .detail .name {
      font-size: 5vw;
      line-height: 8vw;
      color: #16077c;
    }

    .detail .txt {
      font-size: 4vw;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
    }

    .item .more {
      width: 6vw;
      font-size: 30px;
      color: #454141;
    }

    .load-more {
      width: 100%;
      height: 6vh;
      background: #cccccc;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  </style>
  <script src="./js/axios.js"></script>
</head>

<body>
  <div class="singer-list" id="listMain">
    <!-- <div class="item">
      <div class="img-wrap">
        <img src="./images/nature-9.jpg" />
      </div>
      <div class="detail">
        <div class="name">刘德华</div>
        <div class="txt">上的剧可能是多久上的恐惧不是觉得v不是冬季女数据的v上的沉思的v </div>
      </div>
      <div class="more">></div>
    </div> -->
  </div>
</body>
<script>
  window.onload = () => {
    let listMain = document.getElementById('listMain')
    let listData = []
    let page = 1
    let total = 0
    function loadData() {
      axios.get(`/shopApi/singer?page=${page}`).then(res => {
        if (res.status == 200) {
          total = res.data.total
          page = res.data.page
          let str = ""
          let newArr=[...listData,...res.data.list]
          listData = newArr
          console.log('listData',listData.length)
          listData.forEach((item, index) => {
            str += `
            <div class="item"  data-index="${index}">
              <div class="img-wrap">
                <img src="${item.header}" data-index="${index}"/>
              </div>
              <div class="detail" data-index="${index}">
                <div class="name" data-index="${index}">${item.singerName}</div>
                <div class="txt" data-index="${index}">${item.description}</div>
              </div>
              <div class="more" data-index="${index}">></div>
            </div>
            `
          })
          str += `<div class="load-more" id="load-more">加载更多</div>`
          listMain.innerHTML = str
          if(listData.length==total){
            let loadMore = document.getElementById('load-more')
            loadMore.style.display='none'
          }

        }
      })
    }
    loadData()
    listMain.addEventListener('click', (e) => {
      let className = e.target.classList[0]
      if (className == 'load-more') {
        if(listData.length<total){
          page+=1
          loadData()
        }
      } else {
        let index = e.target.dataset.index
        if(!index)return
        let data = listData[index]
        window.location.href = `/singerHome.html?id=${data.id}`
      }
    })
    //提交游客记录
    let str=navigator.userAgent.toLocaleLowerCase()
      let strArr=str.split(" ")
      let last1=strArr[strArr.length-1]
      let last2=strArr[strArr.length-2]
      let ua=`${last2}-${last1}`
    axios.get(`/shopApi/addTourist?scene=music|singerList&message=${ua}`).then(res => {
      if(res.status==200){
        console.log("ok")
      }
    })
  }
</script>

</html>